<template>
    <div id="home">
      <nav-bar class="home-nav">
        <div slot="center" >购物街 </div>
      </nav-bar>
      <scroll class="content" 
      ref="scroll" 
      :probe-type="3" 
      :pull-up-load = "true"
      @pullingUp="loadMore"
      @scroll="showBackTopButtom">
        <swiper />
        <main-control ref="mainControl" @setIndex="(i) => index = i"/>
        
      </scroll>

      <back-top @click.native="backTopclick" v-show="isShouButtom"/>
    </div>
</template>



<script>
  import NavBar from "components/common/navbar/NavBar"
  import Scroll from "components/common/scroll/Scroll"

  import Swiper from "components/content/swiper/Swiper"
  import backTop from "components/content/backTop/backTop"
  import MainControl from "components/content/MainControl/MainControl"
  import {debounce} from "common/utils.js"
  
  

  export default {
    name: 'Home',
    components:{
      NavBar,
      Swiper,
      MainControl,
      Scroll,
      backTop
    },
    data(){
      return {
        isShouButtom : false,
        index : 0,
        refresh:null,
        positionY : 0
      }
    },
    methods:{
      backTopclick(){   //放回顶部
        this.$refs.scroll.scroll.scrollTo(0,0)
      },
      showBackTopButtom(position){  //展示按钮
        this.isShouButtom = position.y < -1000
      },
      loadMore(){    //请求新图片        
        this.refresh();  
        this.$refs.mainControl.getHomeGood(["pop","new","sell"][this.index])  
      }

    },mounted(){
        this.refresh =debounce(this.$refs.scroll.getrefresh,5000)
    },
    activated(){		//进入组件后
      this.$refs.scroll.scroll.refresh()
      this.$refs.scroll.scroll.scrollTo( 0 ,this.positionY );
    },
    deactivated(){		//退出组件后
          this.positionY = this.$refs.scroll.scroll.y
    }
  }
</script>

<style scoped>
  #home {
    height: 100vh;
  }
  .home-nav{
    background-color: pink;
    color: white;
    position: sticky;
    top: 0px;
  }
  .content {
    height: calc(100% - 93px);
    overflow: hidden;
  }
</style>